<template>
	<div>
		<template v-if="zhuan1 == 1">
			<div class="city-top">
				<img src="../../../public/img/bg-top.png">
				<h3>手机号注册/登录</h3>
			</div>
			<div class="city-center">
				<input type="text" placeholder="请输入手机号">
				<div class="yzm_button">
					<input type="text" placeholder="请输入验证码">
					<button>获取验证码</button>
				</div>
				<button>一键注册/登录</button>
				<div class="start_ac">
					<span @click="btn3()">非大陆手机号登陆</span>
					<span @click="btn1()">账号密码登录</span>
				</div>
			</div>
			<div class="city-bottom">
				<div class="iop_pics">
					<p><img src="../../../public/img/wechat.png" >
					<img src="../../../public/img/qq.png" ></p>
				</div>
				<div class="iop_pics2">
					<img src="../../../public/img/gxTrue.png" v-show="bol" @click="bol=!bol">
					<img src="../../../public/img/gxFalse.png" v-show="!bol" @click="bol=!bol">
					<span>未注册游侠客账号的手机,登录时间将同时注册,登录代表您已同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></span>
				</div>
			</div>
			<div class="iop_pics3">
				<span>体验游侠客微信小程序</span>
				<i class="iconfont">&#xe645;</i>
			</div>
		</template>
		<template v-if="zhuan1 == 2">
			<div class="city-top">
				<img src="../../../public/img/bg-top.png">
				<h3>账号密码登录</h3>
			</div>
			<div class="city-center">
				<input type="text" placeholder="请输入手机号/邮箱">
				<div class="yzm_button">
					<input type="text" placeholder="请输入密码">
				</div>
				<button>登录</button>
				<div class="start_ac">
					<span @click="btn4()">忘记密码</span>
					<span @click="btn2()">验证码登录</span>
				</div>
			</div>
			<div class="city-bottom">
				<div class="iop_pics">
					<p><img src="../../../public/img/wechat.png" >
					<img src="../../../public/img/qq.png" ></p>
				</div>
				<div class="iop_pics2">
					<img src="../../../public/img/gxTrue.png" v-show="bol" @click="bol=!bol">
					<img src="../../../public/img/gxFalse.png" v-show="!bol" @click="bol=!bol">
					<span>未注册游侠客账号的手机,登录时间将同时注册,登录代表您已同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></span>
				</div>
			</div>
			<div class="iop_pics3">
				<span>体验游侠客微信小程序</span>
				<i class="iconfont">&#xe645;</i>
			</div>
		</template>
		<template v-if="zhuan1 == 3">
			<div class="city-top">
				<img src="../../../public/img/bg-top.png">
				<h3>邮箱注册/登录</h3>
			</div>
			<div class="city-center">
				<input type="text" placeholder="请输入邮箱">
				<div class="yzm_button">
					<input type="text" placeholder="请输入验证码">
					<button>获取验证码</button>
				</div>
				<button>登录</button>
				<div class="start_ac">
					<span @click="btn2()">手机号登录</span>
					<span @click="btn1()">账号密码登录</span>
				</div>
			</div>
			<div class="city-bottom">
				<div class="iop_pics">
					<p><img src="../../../public/img/wechat.png" >
					<img src="../../../public/img/qq.png" ></p>
				</div>
				<div class="iop_pics2">
					<img src="../../../public/img/gxTrue.png" v-show="bol" @click="bol=!bol">
					<img src="../../../public/img/gxFalse.png" v-show="!bol" @click="bol=!bol">
					<span>未注册游侠客账号的手机,登录时间将同时注册,登录代表您已同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></span>
				</div>
			</div>
			<div class="iop_pics3">
				<span>体验游侠客微信小程序</span>
				<i class="iconfont">&#xe645;</i>
			</div>
		</template>
		<template v-if="zhuan1 == 4">
			<div class="city-top_1">
				<h3>重置密码</h3>
				<div class="yzm_button1">
					<input type="text" placeholder="请输入手机号/邮箱">
					<input type="text" placeholder="请输入验证码">
					<button>获取验证码</button>
				</div>
				<button class="btnNext">下一步</button>
			</div>
		</template>
		
	</div>
</template>

<script>
	export default{
		name : 'Login',
		data(){
			return {
				bol : true,
				zhuan1 : 1
			}
		},
		methods : {
			btn1(){
				this.zhuan1 = 2;
			},
			btn2(){
				this.zhuan1 = 1;
			},
			btn3(){
				this.zhuan1 = 3;
			},
			btn4(){
				this.zhuan1 = 4;
			}
		}
	}
</script>

<style scoped>
	.city-top{
		width: 100%;
	}
	.city-top_1{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	.city-top_1 h3{
		line-height: 2rem;
		font-size: 0.75rem;
		font-weight: bold;
	}
	.city-top_1 input{
		width: 90%;
		height: 0.8rem;
		text-indent: 1em;
		border-radius: 0.1rem;
		border: 0;
		margin-top: 0.5rem;
		outline: none;
	}
	.btnNext{
		color: red;
		width: 90%;
		height: 0.9rem;
		border: 0;
		border-radius: 0.2rem;
		background-color: #fff6cc;
		color: #dfc9a7;
		margin-top: 0.7rem;
		font-size: 0.38rem;
	}
	.city-top img{
		width: 20%;
		height: 20%;
		background-size: 100% 100%;
		display: flex;
		margin: 0 auto;
	}
	.city-top h3{
		text-align: center;
		font-size: 0.35rem;
		line-height: 0.5rem;
		font-weight: bold;
	}
	.city-center{
		width: 90%;
		margin-left: 10%;
	}
	.city-center input{
		width: 90%;
		height: 0.8rem;
		text-indent: 1em;
		border-radius: 0.1rem;
		border: 0;
		outline: none;
		/* border: 1px solid #D4D4D4; */
		margin-top: 0.5rem;
	}
	.yzm_button{
		position: relative;
	}
	.yzm_button button{
		position: absolute;
		right: 10%;
		top: 50%;
		border: 0;
		color: #ecc927;
		background-color: white;
	}
	.yzm_button1 button{
		position: absolute;
		right: 10%;
		top: 64%;
		border: 0;
		color: #ecc927;
		background-color: white;
	}
	.city-center button:nth-child(3){
		width: 90%;
		height: 0.9rem;
		border: 0;
		border-radius: 0.2rem;
		background-color: #fff6cc;
		color: #dfc9a7;
		margin-top: 0.5rem;
		font-size: 0.38rem;
	}
	.start_ac{
		width: 90%;
		line-height: 0.9rem;
		font-size: 0.35rem;
		color: #D4D4D4;
	}
	.start_ac span:nth-child(1){
		float: left;
	}
	.start_ac span:nth-child(2){

		float: right;
	}
	.iop_pics{
		/* position: absolute;
		bottom: 10%; */
		width: 100%;
		line-height: 1.2rem;
	}
	.iop_pics img{
		width: 10%;
		height: 1rem;
		margin-left: 28%;
	}
	.city-bottom{
		margin-top: 100%;
	}
	.iop_pics2{
		width: 90%;
		margin: 0 auto;
	}
	.iop_pics2 img{
		width: 4%;
		height: 0.4rem;
		margin-right: 0.1rem;
	}
	.iop_pics2 span{
		color: #808080;
		line-height: 0.5rem;
		font-size: 0.35rem;
		width: 90%;
	}
	.iop_pics3{
		margin-top: 0.5rem;
		text-align: center;
		line-height: 1.2rem;
		font-size: 0.4rem;
		color: #ecc927;
		border-top: 1px solid #f3f3f3;
	}
	.iop_pics3 i{
		margin-left: 0.3rem;
	}
</style>
